<script lang="ts" setup>
import { onMounted } from 'vue';

import { useFs } from '@fast-crud/fast-crud';

import { getValidateRulesByFs } from '#/api/common/validateByFs';
import { DefParameterConfig } from '#/api/devOperation/system/defParameter';
import { ActionEnum } from '#/enums/commonEnum';

import { createCrudOptions, frontRules } from './data/crud';

defineOptions({
  name: '参数管理',
  inheritAttrs: false,
});

const { crudRef, crudBinding, crudExpose, appendCrudOptions } = useFs({
  createCrudOptions,
});

// 页面打开后获取列表数据
onMounted(async () => {
  const addFormOptions = await getValidateRulesByFs({
    Api: DefParameterConfig.Save,
    mode: ActionEnum.ADD,
    customRules: frontRules.addForm.rules(),
    trigger: ['blur', 'change'],
  });
  const editFormOptions = await getValidateRulesByFs({
    Api: DefParameterConfig.Update,
    mode: ActionEnum.EDIT,
    customRules: frontRules.editForm.rules(crudExpose),
    trigger: ['blur', 'change'],
  });
  appendCrudOptions({ ...addFormOptions, ...editFormOptions });
  crudExpose.doRefresh();
});
</script>

<template>
  <FsPage>
    <FsCrud ref="crudRef" v-bind="crudBinding" />
  </FsPage>
</template>
